<template>
	<view>
		<es-header :isBack="true" class="custom-wrap">
			<template slot="content">
				表单
			</template>
		</es-header>
		<es-form ref="form" :config="formConfig.config" :labelWidth="200" :labelAlign="'left'" @submit="submit" >
			<template v-slot:tipText="scope">
				<es-view class="cu-form-group margin-top-sm" >
					<es-view class="title" style="width: 100%;">以下为日期选择，选择时间范围: range属性</es-view>
				</es-view>
			</template>
		</es-form>
		<es-button @click="getValue">获取表单值</es-button>
	</view>
</template>

<script>
	import config from './config.js'
	export default {
		components: {},
		data() {
			return {
				time: '',
				config,
				// list: getList
			}
		},
		onLoad() {
			// this.$es.req(this.$es.api.LookAroundGetPicList, [{}, '1,10']).then((data, result) => {
			// 	console.log(data, '---------')
			// })
			
			// console.log(this.$api)
		},
		onReachBottom() {
			// this.$refs.esList.reachBottom()
		},
		mounted() {
		},
		computed: {
			formConfig() {
				return config.form(this)
			}
		},
		filters: {
			a(val, ...arg) {
				console.log(val, ...arg)
				return val
			}
		},
		methods: {
			getValue() {
				if (!this.$refs.form.isVerify) {
					uni.showModal({
						title: '提示',
						content: '表单验证失败，请检查'
					})
					return
				}
				uni.showModal({
					title: '获取到的表单值',
					content: JSON.stringify(this.$refs.form.getFormData())
				})
			},
			avatarClick() {
				console.log(111)
			},
			submit(data, setLoading) {
				setTimeout(() => {
					setLoading(false)
				}, 2000)
			},
			buttonClick(setLoading) {
				setLoading(true)
				setTimeout(() => {
					setLoading(false)
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .email-input {
		height: 100px;
	}

	/deep/ .a {
		color: red;
	}

	/deep/ .slot {
		color: gray;
	}

	.list-wrap .item {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		line-height: 200rpx;
		height: 200rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.sq-item view {
		margin-right: 5px;
		margin-bottom: 5px;

	}

	.grid.col-4.grid-square>view {
		width: calc((100% - 15px)/4);
		padding-bottom: calc((100% - 15px)/4);
	}
</style>
